<template>
  <el-card>
    <template #header><h2>护理级别[{{ levelId }}] 已配置项目</h2></template>
    <el-table :data="assigned" stripe>
      <el-table-column prop="name" label="项目名称" />
      <el-table-column prop="cycle" label="周期" />
      <el-table-column prop="times" label="频次" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="remove(row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="goAdd">添加项目</el-button>
    <el-button @click="goBack">返回</el-button>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const route = useRoute()
// 从 query 中获取 levelId
const levelId = Number(route.query.levelId)
const assigned = ref([])

async function fetchAssigned() {
  const { data } = await axios.get('/CareLevelProjectController/getProjectsByLevel', {
    params: { careLevelId: levelId }
  })
  assigned.value = data.data
}

async function remove(projectId) {
  await axios.get('/CareLevelProjectController/deleteCareLevelProject', {
    params: { careLevelId: levelId, careProjectId: projectId }
  })
  fetchAssigned()
}

function goAdd() {
  router.push({ path: '/LevelProjectAdd', query: { levelId } })
}

function goBack() {
  router.push({ path: '/CareLevelList', query: { levelId } })
}

onMounted(fetchAssigned)
</script>

<style scoped>
.el-button { margin: 12px 8px 0 0; }
</style>